<script setup lang="ts">
import  post  from "@/lib/post.ts";
import { ElMessageBox } from "element-plus";
import { ref } from "vue";

const option = ref(null); // 柱状图

const getRoleStatics = async () => {
  const data = await post("/statics/member", { groupKey: "gender" });
  if (!data.success) {
    return ElMessageBox.alert(data.message);
  }
  // console.log('=================data', data);
  let list = data.result.list;
  // {value: 4, label: '男'} -> {value: 4, name: '男'}
  list = list.map(o=>({ value: o.value, name: o.label }));
  option.value = {
    title: {
      text: '性别比率图',
      subtext: '人员性别',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '男女比率',
        type: 'pie',
        radius: '50%',
        data: list,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
}
getRoleStatics();
</script>

<template>
  <v-chart :option="option" />
</template>